<template>
  <footer>
    <ul>
      <!-- <RouterLink custom v-slot="{isActive,navigate}" to="/home">
                <li @click="navigate('/home')" :class="isActive?'active':''">首页</li>
            </RouterLink>
            <RouterLink custom v-slot="{isActive,navigate}" to="/kind">
                <li @click="navigate('/kind')" :class="isActive?'active':''">分类</li>
            </RouterLink>
            <RouterLink custom v-slot="{isActive,navigate}" to="/cart">
                <li @click="navigate('/cart')" :class="isActive?'active':''">购物车</li>
            </RouterLink>
            <RouterLink custom v-slot="{isActive,navigate}" to="/my">
                <li @click="navigate('/my')" :class="isActive?'active':''">我的</li>
            </RouterLink> -->
      <RouterLink
        custom
        v-slot="{ isActive, navigate }"
        :to="item.path"
        v-for="item in paths"
        :key="item.path"
      >
        <li @click="navigate(item.path)" :class="isActive ? 'active' : ''">
          
              <span>{{ item.content }}</span>
        <span><van-icon :name="item.icon" /></span>
        </li>
      
      </RouterLink>
    </ul>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      paths: [
        { path: "/home", content: "首页", icon:"wap-home-o"},
        { path: "/kind", content: "分类" ,icon:"apps-o"},
        { path: "/cart", content: "购物车",icon:"cart-o"  },
        { path: "/my", content: "我的" ,icon:"contact-o"}
      ],
    };
  },
};
</script>

<style scoped lang="less">
.active {
  background-color: lightcoral;
  color: orange;
}
footer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  li{
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
